<div id="div2_chart"></div>
<script>
    var kategori = [];
    var series = [];
    var kat = [];
    var ser = [];

    var kelas10 = 0,
            kelas11 = 0,
            kelas12 = 0,
            kelas13 = 0;
    var json = JSON.parse('<?= $json ?>');
    var kec = '<?= $nama_kecamatan ?>';
    kec = kec.toLowerCase().trim();
    for (var i = 0; i < json.rows.length; i++) {
        var row = json.rows[i];
        if (kec.length > 0) {
            if (row.wilayah.toLowerCase().indexOf(kec) >= 0) {
                kelas10 += parseInt(row.kelas_10);
                kelas11 += parseInt(row.kelas_11);
                kelas12 += parseInt(row.kelas_12);
                kelas13 += parseInt(row.kelas_13);
                
            }
        } else {
            kelas10 += parseInt(row.kelas_10);
                kelas11 += parseInt(row.kelas_11);
                kelas12 += parseInt(row.kelas_12);
                kelas13 += parseInt(row.kelas_13);
        }
    }
    ser.push(['kelas10', kelas10]);
    ser.push(['kelas11', kelas11]);
    ser.push(['kelas12', kelas12]);
    ser.push(['kelas13', kelas13]);
    
    $('#div2_chart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 0, //null,
            plotShadow: false
        },
        title: {
            text: 'Jumlah Peserta Didik Berdasarkan Agama'
        },
        subtitle: {
            text: '<?php
if (isset($subtitle))
    echo implode('-', $subtitle);
else
    echo 'Banyuwangi';
?>'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.y}</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
                type: 'pie',
                name: 'Jumlah',
                data: ser
            }]
    });

</script>
<div style="margin-top: 40px">
    <table class="table table-striped">
        <tr>
            <th>No</th>
            <th>Tingkat</th>
            <th style="text-align: right">Jumlah</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Kelas 10</td>
            <td style="text-align: right" id="jumlah_10"></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Kelas 11</td>
            <td style="text-align: right" id="jumlah_11"></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Kelas 12</td>
            <td style="text-align: right" id="jumlah_12"></td>
        </tr>
        <tr>
            <td>4</td>
            <td>Kelas 13</td>
            <td style="text-align: right" id="jumlah_13"></td>
        </tr>
        
        <tr>
            <td></td>
            <td>Total</td>
            <td style="text-align: right" id="jumlah_total"></td>
        </tr>
    </table>
</div>
<script>
    document.getElementById('jumlah_10').innerHTML = kelas10 + '';
    document.getElementById('jumlah_11').innerHTML = kelas11 + '';
    document.getElementById('jumlah_12').innerHTML = kelas12 + '';
    document.getElementById('jumlah_13').innerHTML = kelas13 + '';
    
    document.getElementById('jumlah_tidak_diisi').innerHTML =kelas10+kelas11+kelas12+kelas13 ;
</script>